<template>
  <view class="container">
    <view class="list-container">
      <view v-if="recordList.length === 0 && status !== 'loading'" class="empty-state">
        {{ $t('acupoint.empty') }}
      </view>

      <view v-else class="record-card" v-for="item in recordList" :key="item.id" @click="goToDetail(item)">
        <view class="card-left">
          <text class="date-text">
            {{ joinPulseTypes(item) }}
          </text>
        </view>
      </view>

      <!-- 加载更多区域 -->
      <view v-if="recordList.length > 0" class="load-more-section">
        <view v-if="status === 'loading'" class="loading-more">
          <text class="load-more-text">{{ $t('acupoint.loading') }}</text>
        </view>
        <view v-else-if="status === 'more'" class="load-more-tip">
          <view class="load-more-button" @click="loadMore">
            <text class="tip-text">{{ $t('order_list.clickLoadMore') }}</text>
          </view>
        </view>
        <view v-else-if="status === 'noMore'" class="load-more-tip">
          <text class="load-more-text">—— {{ $t('acupoint.no_more') }} ——</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { pulse_diagnosis_list } from '@/api/acupoint.js'
  export default {
    data() {
      return {
        currentTab: 'tongue', // 'tongue': 舌诊, face: 面诊
        recordList: [],
        page: 1,
        pageSize: 10,
        status: 'more' // 'more', 'loading', 'noMore'
      }
    },
    onLoad() {
      //new VConsole()
      this.getList()
      this.setTitle()
    },
    onReachBottom() {
      // console.log('触发上拉加载更多')
      // console.log('当前状态:', { status: this.status, page: this.page })

      if (this.status === 'more') {
        this.loadMore()
      } else {
        // console.log('不满足加载条件:', { status: this.status })
      }
    },
    onPullDownRefresh() {
      this.resetAndReload()
    },
    methods: {
      setTitle() {
        // 国际化页面标题
        if (this.$t) {
          uni.setNavigationBarTitle({
            title: this.$t('pulsDiagnosis.title')
          })
        }
      },
      changeTab(name) {
        if (this.currentTab === name) return
        this.currentTab = name
        this.resetAndReload()
      },
      // utils/pulse.js
      joinPulseTypes(record) {
        if (!record) return ''
        const info = record.left_pulse_info ?? record.right_pulse_info
        if (!info || !Array.isArray(info.details)) return ''
        const types = info.details.map(d => (d && d.pulse_type ? String(d.pulse_type).trim() : '')).filter(Boolean)
        return types.join('|')
      },

      resetAndReload() {
        this.page = 1
        this.recordList = []
        this.status = 'more'
        this.getList()
      },
      // 新增：手动触发加载更多的方法
      loadMore() {
        // console.log('触发加载更多')
        // console.log('当前状态:', { status: this.status, page: this.page })

        if (this.status === 'more') {
          this.page++
          // console.log('页码增加到:', this.page)
          this.getList()
        }
      },
      async getList() {
        if (this.status === 'loading') return
        this.status = 'loading'

        try {
          const params = {
            page: this.page,
            pageSize: this.pageSize
          }

          // console.log('请求参数:', params)
          const res = await pulse_diagnosis_list(params)
          // console.log('API响应:', res)

          if (res.code === 200 && res.success) {
            const newList = res.result.items || []
            // console.log('新数据:', newList)
            // console.log('数据长度:', newList.length)

            this.recordList = [...this.recordList, ...newList]
            console.log('看看', this.recordList)
            if (newList.length < this.pageSize) {
              this.status = 'noMore'
              // console.log('设置状态为 noMore')
            } else {
              this.status = 'more'
              // console.log('设置状态为 more')
            }
          } else {
            // console.error('API返回错误:', res)
            uni.showToast({ title: res.message || '数据加载失败', icon: 'none' })
            this.status = 'more'
          }
        } catch (error) {
          // console.error('API Error:', error)
          uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
          this.status = 'more'
        } finally {
          uni.stopPullDownRefresh()
        }
      },
      getCircleStyle(score) {
        if (!score) score = 0 // 安全校验
        const angle = (score / 100) * 360
        return {
          background: `conic-gradient(#6C5FF8 ${angle}deg, #E6E6FA 0deg)`
        }
      },
      goToDetail(data) {
        // console.log('数据已存入缓存:', data)
        uni.navigateTo({
          url: `/pages/blue/PulseAnalysis?appointNo=${data.appoint_no}`
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .container {
    display: flex;
    flex-direction: column;
  }

  /* Tab 样式 */
  .tabs-container {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #ffffff;
    z-index: 99;
    border-bottom: 1px solid #f0f0f0;
    /* #ifdef H5 */
    // H5中，原生导航栏会占据空间，需要调整top值
    top: var(--window-top);
    /* #endif */

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 24rpx 0;
      font-size: 30rpx;
      color: #666;
      position: relative;
      transition: color 0.3s;

      &.active {
        color: #333;
        font-weight: bold;

        &::after {
          content: '';
          position: absolute;
          bottom: 10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background-color: #6c5ff8; // 主题紫色
          border-radius: 3rpx;
        }
      }
    }
  }

  /* 列表样式 */
  .list-container {
    padding: 24rpx;
  }

  .record-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .card-left {
    flex: 1;
    display: flex;
    margin-right: 30rpx;

    .result-text {
      font-size: 28rpx;
      color: #333333;
      line-height: 1.6;
      margin-bottom: 16rpx;
    }

    .date-text {
      font-size: 24rpx;
      color: #999999;

      .separator {
        color: #cccccc;
        margin: 0 8rpx;
        font-weight: normal;
      }
    }
  }

  .card-right {
    .score-circle {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 80rpx;
        height: 80rpx;
        background: #ffffff;
        border-radius: 50%;
      }
    }

    .score-text {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      position: relative;
      z-index: 1;
    }
  }

  // 空状态
  .empty-state {
    text-align: center;
    color: #999;
    padding-top: 200rpx;
    font-size: 28rpx;
  }

  // 加载更多样式 - 参考 report/index.vue
  .load-more-section {
    padding: 30rpx 0;
    text-align: center;
  }

  .loading-more,
  .load-more-tip {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 20rpx;
  }

  .load-more-text,
  .tip-text {
    font-size: 28rpx;
    color: #999;
  }

  .load-more-text {
    color: #007aff;
  }

  .load-more-button {
    cursor: pointer;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    background-color: #f8f8f8;
    transition: background-color 0.3s;
  }

  .load-more-button:active {
    background-color: #e8e8e8;
  }
</style>
